import React from 'react';
import * as UnitAction  from '../../actions/UnitAction';
import { connect }  from 'react-redux';

class UnitList extends React.Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    var self = this;
    this.props.dispatch(
      UnitAction.loadUnitsAsync()
    )
  }

  onSelectClick(data){
    this.props.onSelectClick(data);
  }

  renderList() {
    var self = this;
    var content = [];
    if (this.props.data.data && this.props.data.data.length > 0) {
      this.props.data.data.forEach(function(data, index) {
        content.push((
          <tr onClick={(event)=>self.onSelectClick(data)}>
            <td>{data.unit_number}</td>
          </tr>
        ))
      })
    }

    return content
  }

  render() {
    return(
      <div className="modal fade" id="UnitList" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog modal-lg" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="unit-modal-label">户</h4>
            </div>
            <div className="modal-body">
              <div className="unit-setting-list setting-list">
                <table className="table">
                  <thead>
                    <tr className="table-title">
                      <th>户号</th>
                    </tr>
                  </thead>
                  <tbody>
                    {this.renderList()}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>



    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return { data: state.units }
}

export default connect(mapStateToProps)(UnitList);
